<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/flexible.debug.js"></script>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css" />
		<title>首页</title>
	</head>
	<!--头部-->

	<body>
		<header class="header">
			<span>＋<ul class="ul1"><li><img src="img/bg-sexiangto.png"/></li><li><img src="img/bg-laba.png"/></li></ul></span>
			<span>聚</span>
			<span class="yuan">劵</span>
		</header>
		<!--轮播-->
		<div class="swiper-container lunbo" dir="rtl">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="img/lunbo_1.png" /></div>
				<div class="swiper-slide"><img src="img/lunbo_2.png" /></div>
				<div class="swiper-slide"><img src="img/lunbo_3.png" /></div>
				<div class="swiper-slide"><img src="img/lunbo_2.png" /></div>
			</div>
			<div class="swiper-pagination naton"></div>
		</div>
		<!--导航-->
		<nav class="navbar">
			<figrue class="dapai">
				<img src="img/nav_1.png" />
				<p>非常大牌</p>
			</figrue>
			<figrue class="ping">
				<img src="img/nav_2.png" />
				<p>聚名品</p>
			</figrue>
			<figrue class="quan">
				<img src="img/nav_3.png" />
				<p>全球精选</p>
			</figrue>
			<figrue class="liang">
				<img src="img/nav_4.png" />
				<p>量版优选</p>
			</figrue>
		</nav>
		<!--必抢推荐-->
		<div class="Recommend">
			<div class="cont">
				<h2>必抢推荐•<span>BEST</span></h2>
				<span>全部></span>
			</div>
		</div>
		<!--滑动-->
		<div class="swiper-container huadon">
			<div class="swiper-wrapper">
				<div class="swiper-slide slide"></div>
				<div class="swiper-slide slide"></div>
				<div class="swiper-slide slide"></div>
				<div class="swiper-slide slide"></div>
			</div>
		</div>
		<!--tab-->
		<div class="lists">
			<section class="box">
				<div class="swiper-container-list banner">
					<div class="swiper-wrapper nav-list">
						<div class="swiper-slide active">今日好货</div>
						<div class="swiper-slide">今日大牌</div>
					</div>
				</div>
				<div class="swiper-container-opts subject-list">
					<div class="swiper-wrapper">
						<div class="swiper-slide list_slide">
							<h3>品牌男装</h3>
							<div class="clothes">
								<!--<div class="commodity">
									<figure><img src="img/yifu_1.png"/></figure>
									<p>[到手价388还送围巾]仅仅=限1000名</p>
									<p><span>￥ 438</span><span>￥998</span></p>
									<p><span>热卖中</span><span>222 件已售</span></p>
								</div>-->

							</div>
						</div>

						<div class="swiper-slide list_slide slide_cont">
							<!--<h3>今日大牌</h3>-->
							<script type="text/html" id="huadon1_temp">
								<h3>今日大牌</h3> {{each hua v i}}
								<div class="Major_suit">
									<figure><img src="{{v.img}}" /></figure>
									<div class="swiper-container huadon1">
										<div class="swiper-wrapper">
											{{each v.slide n i}}
											<div class="swiper-slide slide1">
												<div class="content2">
													<figure><img src="{{n.img_sl}}" /></figure>
													<p><span>￥ {{n.sp1}}</span><span>￥{{n.sp1}}</span></p>
												</div>
											</div>
											{{/each}}
										</div>
									</div>
									<div class="foog"><span>{{v.span1}}</span><span>{{v.span2}} |</span><span>{{v.span3}}</span></div>
								</div>
								{{/each}}
							</script>
							<!--<div class="Major_suit">
								<figure>
									<img src="img/dapai_1.png"/>
								</figure>
								<div class="swiper-container huadon1">
							        <div class="swiper-wrapper">
							        	<div class="swiper-slide slide1">
							        		<div class="content2">
							        			<figure><img src="img/chi_1.png"/></figure>
							        			<p><span>￥ 56</span><span>￥96</span></p>
							        		</div>
							        	</div>
							     		
							     		<div class="swiper-slide slide1">
							        		<div class="content2">
							        			<figure><img src="img/chi_2.png"/></figure>
							        			<p><span>￥ 56</span><span>￥96</span></p>
							        		</div>
							        	</div>
							        </div>
							    </div>
							    <div class="foog"><span>451545</span><span>件已售|</span><span>仅剩一天</span></div>
							</div> -->
						</div>

					</div>
				</div>
			</section>
		</div>

		<!--底部-->
		<footer class="footer">
			<figrue class="Selected">
				<img src="img/fooger_1.png" />
				<p class="actives">精选</p>
			</figrue>
			<figrue class="classification">
				<img src="img/fooger_2.png" />
				<p>分类</p>
			</figrue>
			<figrue class="faxian">
				<img src="img/fooger_3.png" />
				<p>发现</p>
			</figrue>
			<figrue class="My">
				<img src="img/fooger_4.png" />
				<p>我的</p>
			</figrue>
		</footer>
		<div class="Empty_box"></div>

		<!--滑动模板-->
		<script type="text/html" id="div_list">
			{{each a v i}}
			<div class="content">
				<figure><img src="{{v.img}}" /></figure>
				<div class="text">
					<h3>{{v.h3}}</h3>
					<p>{{v.p1}}</p>
					<p><span>￥{{v.sp1}}</span> <span>￥{{v.sp2}}</span></p>
					<p><span>已售{{v.sp3}}</span><span>仅剩{{v.sp4}}件</span></p>
				</div>
			</div>
			{{/each}}
		</script>
		<!--衣服模板-->
		<script type="text/html" id="commodity_temp">
			{{each comm v i}}
			<div class="commodity">
				<figure><img src="{{v.img}}" /></figure>
				<p>{{v.p1}}</p>
				<p><span>￥ {{v.sp1}}</span><span>￥{{v.sp2}}</span></p>
				<p><span>{{v.sp3}}</span><span>{{v.sp4}} 件已售</span></p>
			</div>
			{{/each}}
		</script>

		<script src="js/jquery-3.2.1.js"></script>
		<script src="js/swiper-3.4.2.jquery.min.js"></script>
		<script src="js/template-web.js"></script>
		<script>
			$('.Selected').click(function() {
				location.href = "index.html"
			})
			$('.classification').click(function() {
				location.href = "html/faxian.html"
			})
			$('.faxian').click(function() {
				location.href = "html/find.html"
			})
			$('.My').click(function() {
				location.href = "html/Login_page.html"
			})
			$('.dapai').click(function(){
				location.href = "html/nav_.html"
			})
			$('.ping').click(function(){
				location.href = "html/nav_2.html"
			})
			$('.quan').click(function(){
				location.href = "html/nav_3.html"
			})
			$('.liang').click(function(){
				location.href = "html/nav_4.html"
			})
			var swiper = new Swiper('.lunbo', {
				pagination: '.naton',
				paginationClickable: true,
				loop: true,
				autoplay: 2500
			});

			var swiper1 = new Swiper('.huadon', {
				slidesPerView: 1.1,
				paginationClickable: true,
				spaceBetween: 30
			});

			var Swiper_active1 = $('.swiper-container-list .active'),
				Swiper_slide1 = $('.swiper-container-list .swiper-slide');
			var _mySwiperlist = new Swiper('.swiper-container-list', {
				watchSlidesProgress: true,
				watchSlidesVisibility: true,
				slidesPerView: 2,
				onTap: function() {
					_mySwiperopts.slideTo(_mySwiperlist.clickedIndex)
				}
			})
			var _mySwiperopts = new Swiper('.swiper-container-opts', {
				onSlideChangeStart: function() {
					updateNavPosition(Swiper_active1, Swiper_slide1, _mySwiperopts, _mySwiperlist)
				}
			})

			function updateNavPosition(Swiper_active, Swiper_slide, mySwiper, mySwiper_list) {
				Swiper_active.removeClass('active')
				var activeNav = Swiper_slide.eq(mySwiper.activeIndex).addClass('active');
				activeNav.siblings().removeClass("active");
				if(!activeNav.hasClass('swiper-slide-visible')) {
					if(activeNav.index() > mySwiper_list.activeIndex) {
						var thumbsPerNav = Math.floor(mySwiper_list.width / activeNav.width()) - 1
						mySwiper_list.slideTo(activeNav.index() - thumbsPerNav)
					} else {
						mySwiper_list.slideTo(activeNav.index())
					}
				}
			}
			//衣服
			$.ajax({
				type: "get",
				url: "json/clothes.json",
				success: function(data) {
					var str = template("commodity_temp", {
						comm: data
					})
					$('.clothes').html(str)
				}
			});
			//推荐
			$.ajax({
				type: "get",
				url: "json/slide.json",
				success: function(data) {
					var str = template("div_list", {
						a: data
					})
					$('.slide').html(str)
				}
			});
			//right
			$.ajax({
				type: "get",
				url: "json/huadon_cont.json",
				success: function(data) {
					var str = template("huadon1_temp", {
						hua: data
					})
					$('.slide_cont').html(str)
					var swiper2 = new Swiper('.huadon1', {
						slidesPerView: 3.3,
						paginationClickable: true,
						spaceBetween: 30
					});
				}
			});
			var h = $('.banner').outerHeight()+12;
			var r = $('.banner').offset().top;
			var t = r - h;
			var num = 100;
			$(window).scroll(function() {
				$('.header :first-child').children('ul').hide()
				if($(window).scrollTop() <= num) {
					$('.header').addClass('active1')
				}
				if($(window).scrollTop() === 0) {
					$('.header').removeClass('active1').addClass('active2')
				}
				if($(window).scrollTop() > t) {
					$('.banner').addClass('active_banner')
				} else {
					$('.banner').removeClass('active_banner')
				}
			})
			$('.banner').click(function() {
				$('.banner').addClass('active_banner')
				$('.header').addClass('active1')
				$(window).scrollTop(t)
			})
			
			$('.header :first-child').click(function(e) {
				console.log($(this).text())
				if($(this).children('ul').hasClass('ul1')) {
					$(this).children('ul').show(300)
					$(this).children('ul').removeClass('ul1').addClass('ul2')

				} else if($(this).children('ul').hasClass('ul2')) {
					$(this).children('ul').hide(300)
					$(this).children('ul').removeClass('ul2').addClass('ul1')
				}
			})
		</script>
	</body>

</html>